<!-- 交易页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="overall" style="background-color: #fff">
			<!-- 菜单部分 start -->
			<view class="Information">
				<view class="top">
					<view @click="toPages(item, 0)" v-for="(item, index) in topList" :key="item.id">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{ item.title }}</text>
					</view>
				</view>
				<view class="bottom">
					<view @click="toPages(item, 1)" v-for="(item, index) in bottomList" :key="item.id">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
			<!-- 菜单部分 end -->
			<!-- 持仓部分 start -->
			<view class="warehouse">
				<view class="h5">持仓</view>
				<view class="statistics">
					<view class="dl">
						<text>今日</text>
						<text class="textred">{{ tradeData.today_floatPL }}</text>
					</view>
					<view class="dl">
						<text>持仓收益</text>
						<text class="textred">{{ tradeData.total_floatPL }}</text>
					</view>
					<view class="dl">
						<text>总市值</text>
						<text style="color: #343434">{{ tradeData.holdMarketValue }}</text>
					</view>
					<view class="dl">
						<text>杠杆</text>
						<text style="color: #343434">{{ tradeData.lever }}</text>
					</view>
					<view class="dl">
						<text>警戒线</text>
						<text style="color: #ea8604">{{ tradeData.cordon }}</text>
					</view>
					<view class="dl">
						<text>平仓线</text>
						<text class="textred">{{ tradeData.closePositionLine }}</text>
					</view>
				</view>
			</view>
			<!-- 持仓部分 end -->
			<view class="backList">
				<view class="list" v-for="(item, index) in holdList" v-show="index < 3" :key="index">
					<view class="col-1">
						<view class="text1">{{ item.name }} {{ item.all_no }} {{ index }}</view>
						<view class="text2">
							{{ item.create_at }}
						</view>
					</view>
					<view class="col-2">
						<view class="col-2-box">
							<view class="text1">成交价 &nbsp; {{ item.deal_price }}</view>
							<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
							<view class="text1">数量 &nbsp; {{ item.total_lever_num }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">市值 &nbsp; {{ item.market_value }}</view>
							<view class="text1 red">收益率 &nbsp; {{ item.income_rate }}</view>
							<view class="text1 red">亏盈 &nbsp; {{ item.single_profit_loss }}</view>
						</view>
						<view class="col-2-box">
							<view class="text1">保证金 &nbsp; {{ item.total_earnest }}</view>
							<view class="text1">总数 &nbsp; {{ item.total_lever_num }}</view>
							<view class="text1">可用 &nbsp; {{ item.can_use_num }}</view>
						</view>
					</view>
					<!-- <view class="col-3" >
						<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" @click="ReplenishmentClick(item)">补充股数</view>
						<view class="botton" :class="[item.account_freeze === false ? 'botton1' : 'gredBotton1']" style="margin-left: 40rpx;"  @click="sellFn(item)">委托卖出</view>
						<view class="botton" :class="[item.account_freeze === false ? 'botton2' : 'gredBotton2']" @click="sellFn(item)">平仓</view>
					</view> -->
				</view>
			</view>
			<typePopup ref="typePopup" :isShow="ReplenishmentShow" height="250rpx" type="Replenishment" @close="ReplenishmentShow = false" @sub="ReplenishmentSub"></typePopup>
		</view>
	</view>
</template>

<script>
import webSocketMixin from '@/api/socket.js';
import request from '@/api/request.js';
export default {
	mixins: [webSocketMixin],
	data() {
		return {
			tradeData: {
				closePositionLine: '70%',
				cordon: '50%',
				holdMarketValue: 0,
				lever: 10,
				today_floatPL: 0,
				total_floatPL: 0
			}, // 交易首页数据
			socketTask: null, // wss:1
			socketTask2: null,
			holdList: [], // 持仓列表
			topList: [
				{
					istradeid: 0,
					title: '买入',
					imgUrl: '../../static/trade-icon/jy_icon01.png',
					url: '/pages/trade/trading'
				},
				{
					istradeid: 1,
					title: '卖出',
					imgUrl: '../../static/trade-icon/jy_icon02.png',
					url: '/pages/trade/trading'
				},
				{
					istradeid: 2,
					title: '撤单',
					imgUrl: '../../static/trade-icon/jy_icon03.png',
					url: '/pages/trade/trading'
				},
				{
					istradeid: 3,
					title: '持仓',
					imgUrl: '../../static/trade-icon/jy_icon04.png',
					url: '/pages/trade/trading'
				}
			],
			bottomList: [
				{
					id: 1,
					title: '当日委托',
					imgUrl: '../../static/trade-icon/jy_icon05.png',
					url: '/pages/trade/historicalRecord',
					index: 0
				},
				{
					id: 2,
					title: '当日成交',
					imgUrl: '../../static/trade-icon/jy_icon06.png',
					url: '/pages/trade/historicalRecord',
					index: 1
				},
				{
					id: 3,
					title: '当日结算',
					imgUrl: '../../static/trade-icon/jy_icon07.png',
					url: '/pages/trade/historicalRecord',
					index: 2
				},
				{
					id: 4,
					title: '查询',
					imgUrl: '../../static/trade-icon/jy_icon08.png',
					url: '/pages/trade/historicalRecord',
					index: 0
				}
			],
			ReplenishmentShow: false, // 补充股数
			ReplenishmentData: {}
		};
	},
	async onShow() {
		// 设置导航栏颜色
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.presentColor
			});
		}, 10);
		// 获取首页的数据
		let userData = uni.getStorageSync('userData');
		this.socketTask = await this.handleConnectWebSocket(`?type=trade_index&token=${userData.token}`);
		this.socketTask.onMessage((res) => {
			let data = JSON.parse(res.data);
			if (data) {
				if (data.type === 'ping') {
					return;
				}
				this.tradeData = data;
			}
		});
		// 获取持仓数据
		this.socketTask2 = await this.handleConnectWebSocket(`?type=trade_hold_shares&token=${userData.token}`);
		this.socketTask2.onMessage((res) => {
			if (res.data) {
				let data = JSON.parse(res.data);
				if (data) {
					if (data.type === 'ping') {
						return;
					}
					console.log('持仓', data);
					this.holdList = data;
				}
			}
		});
	},
	onHide() {
		if (this.socketTask && this.socketTask2) {
			this.socketTask.close();
			this.socketTask2.close();
		}
	},
	onLoad() {},
	methods: {
		toPages(data, type) {
			if (!type) {
				uni.navigateTo({
					url: `/pages/trade/trading?data=${JSON.stringify(data)}`
				});
			} else {
				uni.navigateTo({
					url: `${data.url}?isTabActive=${data.index}`
				});
			}
		},
		sellFn(e) {
			let data = e;
			data.isTrade = true;
			uni.navigateTo({
				url: `/pages/trade/trading?data=${JSON.stringify(data)}`
			});
		},
		// 撤单点击
		ReplenishmentClick(e) {
			// 账户冻结
			if (e.account_freeze === true) {
				return;
			}
			this.ReplenishmentShow = true;
			this.ReplenishmentData = e;
		},
		// 补充股数确定
		async ReplenishmentSub(value) {
			if (Number(value) % 100 != 0) {
				uni.showToast({
					title: '补仓数量需为100的倍数',
					icon: 'none'
				});
				return;
			}
			let data = await request.post('/api/trade/supplement', {
				id: this.ReplenishmentData.id,
				price: this.ReplenishmentData.price,
				num: value
			});
			if (data.code === 1) {
				this.$refs.typePopup.value = '';
				this.ReplenishmentShow = false;
				uni.showToast({
					title: data.msg,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.hr {
	width: 100%;
	height: 0.625rem;
	background-color: white;
}
.overall {
	width: 100%;
	background: var(--mine-bg) no-repeat;
	background-size: 100% 8.5rem;
	overflow: hidden;
}
/* 菜单部分样式 start */
.Information {
	width: 93.6%;
	height: 12.6875rem;
	margin: 0rem auto;
	margin-top: 3.2rem;
	background-color: #fcf8f5 !important;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 5px 2px #ddd;
}
.top {
	width: 100%;
	height: 6.875rem;
	display: flex;
	justify-content: space-between;
}
.bottom {
	width: 100%;
	height: 5.5rem;
	display: flex;
	justify-content: space-between;
}
.top image {
	width: 3rem;
	height: 3rem;
}
.top > view {
	width: 25%;
	height: 100%;
	font-size: 0.88rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0rem;
	box-sizing: border-box;
}
.bottom image {
	width: 1.625rem;
	height: 1.625rem;
}
.bottom > view {
	width: 25%;
	height: 100%;
	font-size: 0.88rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0rem;
	box-sizing: border-box;
	margin-top: 0.3125rem;
}
/* 菜单部分样式 end */
/* 持仓部分样式  start*/
.warehouse {
	width: 100%;
	height: 12.5rem;
	padding-left: 0.75rem;
	padding-top: 0.75rem;
	padding-right: 0.75rem;
	box-sizing: border-box;
}
.h5 {
	width: 100%;
	height: 2.125rem;
	margin-top: 0.875rem;
	padding: 0.3125rem 0.625rem;
	box-sizing: border-box;
}
.statistics {
	width: 100%;
	height: 8.34375rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	.textred {
		color: var(--nav-bg);
	}
}
.dl {
	width: 7.3125rem;
	height: 50%;
	display: flex;
	padding-left: 0.625rem;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
.dl text:nth-child(1) {
	font-size: 0.6rem !important;
	color: #b3b3b3 !important;
}
.dl text:nth-child(2) {
	font-size: 1.2rem !important;
}
/* 持仓部分样式  end*/
.backList {
	padding: 20rpx 20rpx;
	// background-color: white;3
	.list {
		border-radius: 10rpx;
		background-color: #zfcf8f5;
		margin-top: 20rpx;
		padding: 20rpx;
		box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
		-webkit-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
		-moz-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
		.col-1 {
			display: flex;
			justify-content: space-between;
			.text2 {
				font-size: 20rpx;
				color: #999;
			}
		}
		.col-2 {
			padding-top: 10rpx;
			.col-2-box {
				text-align: left;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 20rpx;
				color: #999;
				.text1 {
					flex: 1;
				}
				.red {
					color: var(--nav-bg) !important;
				}
			}
		}
		.col-3 {
			display: flex;
			justify-content: right;
			margin-top: 30rpx;
			.botton {
				width: 180rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 0rpx;
			}
			.botton1 {
				border: 1px solid #ff6161;
				color: #ff6161;
			}
			.botton2 {
				background-color: #ff6161;
				color: white;
				margin-left: 40rpx;
			}
			.gredBotton1 {
				border: 1px solid #999;
				color: black;
			}
			.gredBotton2 {
				background-color: #999;
				color: white;
				margin-left: 40rpx;
			}
		}
	}
	.image {
		display: flex;
		justify-content: center;
		image {
			transform: scale(0.5);
		}
	}
}
</style>
